<template>
  <div class="page-config">
    <div class="top">属性面板</div>
    <div class="bottom">
      <div class="title">画布配置</div>
      <div class="body">
        <el-form label-width="80" class="p-form" label-position="left">
          <el-form-item label="画布名称">
            <el-input v-model="canvasConfig.name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="尺寸" class="large_label"></el-form-item>
          <setting-item-box>
            <setting-item name="宽度">
              <el-input-number v-model="canvasConfig.width" controls-position="right" size="small">
              </el-input-number></setting-item>
            <setting-item name="高度">
              <el-input-number v-model="canvasConfig.height" controls-position="right" size="small">
              </el-input-number>
            </setting-item>
          </setting-item-box>
          <el-form-item label="背景图" class="large_label"></el-form-item>
          <el-form-item label="应用类型">
            <el-select v-model="canvasConfig.selectColor" size="small">
              <el-option label="应用颜色" :value="true" />
              <el-option label="应用图片" :value="false" />
            </el-select>
          </el-form-item>
          <el-form-item label="背景颜色" v-show="canvasConfig.selectColor">
            <el-color-picker v-model="canvasConfig.background" show-alpha size="small" />
          </el-form-item>
          <el-form-item label="背景图片" v-show="!canvasConfig.selectColor">
            <el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess"
              :auto-upload="false" action="#" :on-change="handleChange">
              <img v-if="canvasConfig.backgroundImage" :src="canvasConfig.backgroundImage" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="适配方式">
            <el-button-group>
              <template v-for="item in previewTypeList" :key="item.key">
                <el-tooltip :show-arrow="false" :content="item.desc" placement="top">
                  <el-button :type="
                    canvasConfig.previewScaleType === item.key
                      ? 'primary'
                      : ''
                  " plain size="small" @click="selectPreviewType(item.key)">
                    <template #icon>
                      <el-icon size="18">
                        <component :is="item.icon"></component>
                      </el-icon>
                    </template>
                  </el-button>
                </el-tooltip>
              </template>
            </el-button-group>
          </el-form-item>
          <!-- <el-form-item label="主题颜色" class="large_label"></el-form-item>
          <ChartThemeColor /> -->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { SettingItem, SettingItemBox } from "@/components/ChartItemSetting";
// import ChartThemeColor from "./component/ChartThemeColor/index.vue";
let store = useStore();

let canvasConfig = computed(() => {
  return store.state.chartEditStore.editCanvasConfig;
});

const handleAvatarSuccess = (response, uploadFile) => { };
function handleChange(response, uploadFile) {
  let raw = response.raw;
  if (!/(jpe?g|png)$/.test(raw.type)) {
    ElMessage.error("请输入png或jpg格式图片");
    return false;
  } else if (raw.size / 1024 / 1024 > 2) {
    ElMessage.error("请上传小于2MB图片!");
    return false;
  }
  canvasConfig.value.backgroundImage = URL.createObjectURL(raw);
}

const previewTypeList = [
  {
    key: "fit",
    title: "自适应",
    icon: Plus,
    desc: "自适应比例展示，页面会有留白",
  },
  {
    key: "scrollY",
    title: "Y轴滚动",
    icon: Plus,
    desc: "X轴铺满，Y轴自适应滚动",
  },
  {
    key: "scrollx",
    title: "X轴滚动",
    icon: Plus,
    desc: "Y轴铺满，X轴自适应滚动",
  },
  {
    key: "full",
    title: "铺满",
    icon: Plus,
    desc: "强行拉伸画面，填充所有视图",
  },
];
// 选择适配方式
const selectPreviewType = (key) => {
  store.commit("chartEditStore/SET_EDITCANVAS_CONFIG", {
    type: "previewScaleType",
    key: key,
  });
};
</script>
<style lang="scss" scoped>
.page-config {
  width: 100%;
  height: 100%;
  overflow: auto;

  .top {
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    height: 8%;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #d9d9d9;
  }

  .bottom {
    width: 100%;
    height: 92%;
    padding: 10px;

    .title {
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #0084fe;
      background-color: #d3eafe;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    .body {
      padding: 10px;

      .p-form {
        ::v-deep(.el-form-item) {
          margin-bottom: 10px;
        }

        ::v-deep(.el-form-item__label) {
          font-size: 12px;
        }

        .el-input {
          width: 90%;
        }

        .avatar {
          width: 90%;
          height: 80px;
          margin: 0 auto;
        }
      }
    }
  }

  .large_label {
    :deep(.el-form-item__label) {
      font-size: 14px !important;
      font-weight: bold;
    }
  }
}

::v-deep(.el-color-picker__trigger, .el-color-picker) {
  width: 100%;
}

::v-deep(.el-color-picker) {
  width: 100%;
}

::v-deep(.el-select) {
  .el-input {
    height: 24px;
  }
}
</style>
